<template>
	<view>
		<view v-if="userinfo.is_state==0">
			<text class="title">获得更便捷的登录体验</text>
			
			
			<camera v-if="!face_image" device-position="front" flash="auto" @error="error" style="width: 480rpx; height: 480rpx; border-radius: 50%; margin: 0 auto;"> 
				<!-- <image class="icon" src="/static/face-image.png" mode="aspectFit" v-if="isFace == false"></image> -->
			</camera>
			<image class="icon" :src="face_image" v-if="face_image"></image>
			
			
			<!-- <image class="icon" src="/static/face-image.png" mode="aspectFit"></image> -->
			<view class="btn" @click="setFace" v-if="!face_image">录入{{title}}</view>
			<view class="btn" v-if="face_image" @click="face_image = ''">重新录入{{title}}</view>
			<view class="center">
					<checkbox-group @change="selfChangde" name="">
						<label class="radio">
							<checkbox :checked="selfChecked"></checkbox>
						</label>
						<navigator url="/pages/user/xieyi" hover-class="none" open-type="navigate">
								<text class="description">点击录入即代表您已阅读并同意《用户隐私协议》</text>
						</navigator>
					</checkbox-group>
					
			</view>
			
				
		</view>
		
		<view v-if="userinfo.is_state==1">
			<view class="form-item u-border-bottom">
				<text class="form-title">昵称</text>
				<u-input style="flex: 1;" :customStyle="inputStyle" v-model="userinfo.user_nickname" input-align="right"></u-input>
			</view>
			
			
			<view class="form-item u-border-bottom">
				<text class="form-title">联系方式</text>
				<u-input style="flex: 1;" :customStyle="inputStyle" v-model="userinfo.mobile" input-align="right"></u-input>
			</view>
			
			<view class="form-item u-border-bottom">
				<text class="form-title">在职时间</text>
				<u-input style="flex: 1;" :customStyle="inputStyle" disabled :value="$u.timeFormat(userinfo.create_time,'yyyy年mm月dd日') + ' - ' + '至今'" input-align="right"></u-input>
			</view>
		</view>
	</view>

</template>
<style lang="scss">
	
	page{
		background-color: #FFFFFF;
	}
	.form{ display: flex; flex-direction: column; margin-top: 16rpx; }
	.form-item{ display: flex; flex-direction: row; margin:0 32rpx; background-color: #FFFFFF; padding: 0 30rpx; }
	.form-title{ font-size: 24rpx; line-height: 110rpx; margin-right: 30rpx;}
	.title{
		font-size: 32rpx;
		text-align: center;
		display: block;
		margin: 100rpx 0;
	}
	.radio{
		float: left;
		margin-left: 2rem;
	}
	
	.icon{
		display: block;
		margin: 0 auto;
		width: 480rpx; height: 480rpx;
		border-radius: 50%;
	}
	.center{
		width: 700rpx;
		margin:50rpx auto
	}
	
	.btn{
		width: 594rpx;
		height: 92rpx;
		text-align: center;
		line-height: 92rpx;
		background-color: #2e8bf0;
		color: #FFFFFF;
		border-radius: 46rpx;
		margin: 50rpx auto;
	}
	
	.description{
		font-size: 24rpx;
		color: #666666;
		text-align: center;
		display: block;
		line-height: 50rpx;
	}
	
	.scan-img{
		opacity: 0.4;
		width: 100%;
		height:500upx;
	}
	
	.scan-text{
		font-size: 20px;
		text-align: center;
		line-height: 60upx;
	}
	
</style>
<script>
	let camera = uni.createCameraContext({
			takePhoto:{
				quality:"high"
			}
		})
	export default {
		data() {
			return {
				isFace:false,
				face_image:"",
				title:"个人信息",
				userinfo:[],
				selfChecked:false,			}
		},
		methods: {
			onLoad(){
				
				this.$u.api.getUserInfo().then(res => {
					this.face_image = res.data.face_image;
					this.isFace = res.data.isFace;
					this.title = res.data.is_state_title;
					this.userinfo = res.data;
				});
			},
			selfChangde(e){
				console.log(e)
				this.selfChecked = !this.selfChecked;
			},
			setFace(){
				
				if(!this.selfChecked){
					console.log(this.selfChecked);
					this.$u.toast("请勾选用户协议");return
				}
				uni.showLoading();
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						this.$u.api.uploadFile({
							url:'user/upload/one?app=face',
							filePath: res.tempImagePath,
							name: 'file',
							success:uploadRes => {
								if(uploadRes.code == 0){
									this.$u.toast(uploadRes.msg);
								}else{
									this.$u.api.postUserInfo({face_image:uploadRes.data.filepath}).then(result => {
										this.$u.toast(result.msg);
										if(result.code){
											this.face_image = result.data.face_image;
									
											uni.setStorageSync('user',res.data);
										}
									});
								}
							},
							complete:res => {
								uni.hideLoading();
							}
						});
					}
				});
				
			}
		}
	}
</script>

<style>

</style>
